<!--
 * @Description: 新建、编辑ACL
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-05 11:01:39
 * @LastEditTime: 2021-11-11 16:29:31
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" label-position="right">
      <!-- Permit -->
      <el-form-item label="Permit" prop="permit">
        <el-select v-model="form.permit" style="width:100%;">
          <el-option :value="0" label="允许"></el-option>
          <el-option :value="1" label="拒绝"></el-option>
        </el-select>
      </el-form-item>
      <!-- 协议类型 -->
      <el-form-item label="协议" prop="protocolType">
        <el-select v-model="form.protocolType" style="width:100%;">
          <el-option :value="0" label="Any"></el-option>
          <el-option :value="1" label="TCP"></el-option>
          <el-option :value="2" label="UDP"></el-option>
        </el-select>
      </el-form-item>
      <!-- 优先级 -->
      <el-form-item
        label="优先级"
        prop="priority"
        :rules="[
          { required: true, message: '请输入优先级', trigger: 'blur'},
          {  min: 0, max: 100, type: 'number', message: '范围：0-100'}
        ]"
      >
        <el-input v-model.number="form.priority" />
      </el-form-item>
      <!-- 带宽 -->
      <el-form-item
        label="带宽"
        prop="bandWidth"
        :rules="[
          { required: true, message: '请输入带宽', trigger: 'blur'},
          {  min: 1, type: 'number', message: '范围：>0'}
        ]"
      >
        <el-input v-model.number="form.bandWidth">
          <template slot="append">Kbps</template>
        </el-input>
      </el-form-item>
      <template v-if="form.protocolType === 0">
        <el-divider>源端</el-divider>
        <!-- 源端IP/掩码 -->
        <el-form-item label="IP/掩码" prop="source" class="ip-mask">
          <el-input v-model="form.sourceIp" placeholder="IP地址" />
          <label>/</label>
          <el-input v-model.number="form.sourceMask" placeholder="掩码" />
        </el-form-item>
      </template>
      <template v-if="form.protocolType === 1 || form.protocolType === 2">
        <el-divider>源端</el-divider>
        <!-- 源端IP/掩码 -->
        <el-form-item label="IP/掩码" prop="source" class="ip-mask">
          <el-input v-model="form.sourceIp" placeholder="IP地址" />
          <label>/</label>
          <el-input v-model.number="form.sourceMask" placeholder="掩码" />
        </el-form-item>
        <!-- 源端口 -->
        <el-form-item label="端口" prop="sourcePort">
          <el-input v-model="form.sourcePort" placeholder="端口：5000,5100-5200" />
        </el-form-item>
        <el-divider>目的端</el-divider>
        <!-- 目的端IP/掩码 -->
        <el-form-item label="IP/掩码" prop="dest" class="ip-mask">
          <el-input v-model="form.destIp" placeholder="IP地址" />
          <label>/</label>
          <el-input v-model.number="form.destMask" placeholder="掩码" />
        </el-form-item>
        <!-- 目的端口 -->
        <el-form-item label="端口" prop="destPort">
          <el-input v-model="form.destPort" placeholder="端口：5000,5100-5200" />
        </el-form-item>
      </template>
      <el-alert title="填写任意IP时，请输入：0.0.0.0/0" type="warning" show-icon></el-alert>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['introduce', 'type', 'dialogStatus', 'data'],
  data () {
    return {
      dialogTitle: '',
      form: {
        permit: null,
        protocolType: null,
        priority: null,
        bandWidth: null,
        // 源端
        sourceIp: null,
        sourceMask: null,
        sourcePort: null,
        // 目的端
        destIp: null,
        destMask: null,
        destPort: null
      },
      rules: {
        permit: [{
          required: true,
          message: '请选择Permit',
          trigger: 'change'
        }],
        protocolType: [{
          required: true,
          message: '请选择协议类型',
          trigger: 'change'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建ACL';
          _this.form = {
            permit: null,
            protocolType: null,
            priority: null,
            bandWidth: null,
            // 源端
            sourceIp: null,
            sourceMask: null,
            sourcePort: null,
            // 目的端
            destIp: null,
            destMask: null,
            destPort: null
          };
        }
        if (val === 'update') {
          _this.dialogTitle = '编辑ACL';
          let form = {
            id: _this.data.id,
            permit: _this.data.permit,
            protocolType: _this.data.protocolType,
            priority: _this.data.priority,
            bandWidth: _this.data.bandWidth,
          };
          if (_this.data.protocolType === 0) {
            // 源端
            form.sourceIp = _this.data.srcIP.substr(0, _this.data.srcIP.indexOf('/'));
            form.sourceMask = _this.data.srcIP.substr(_this.data.srcIP.indexOf('/') + 1, _this.data.srcIP.length);
            form.sourcePort = _this.data.srcPort;
            // 目的端
            form.destIp = null;
            form.destMask = null;
            form.destPort = null;
          } else {
            // 源端
            form.sourceIp = _this.data.srcIP.substr(0, _this.data.srcIP.indexOf('/'));
            form.sourceMask = _this.data.srcIP.substr(_this.data.srcIP.indexOf('/') + 1, _this.data.srcIP.length);
            form.sourcePort = _this.data.srcPort;
            // 目的端
            form.destIp = _this.data.destIP.substr(0, _this.data.destIP.indexOf('/'));
            form.destMask = _this.data.destIP.substr(_this.data.destIP.indexOf('/') + 1, _this.data.destIP.length);
            form.destPort = _this.data.destPort;
          }
          _this.form = form;
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['ruleForm'].resetFields();
    },
    // 过滤IP:Port/Mask
    // eslint-disable-next-line complexity
    ipAddress () {
      let _this = this;
      let ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/;
      let arry = [];
      if (_this.form.protocolType === 0) {
        if (_this.form.sourceIp === '' || _this.form.sourceIp === null) {
          arry.push('源IP不能为空！');
        } else {
          if (_this.form.sourceIp.replace(ipv4) !== 'undefined') {
            arry.push('源IP格式不正确！');
          }
        }
        if (_this.form.sourceMask === '' || _this.form.sourceMask === null) {
          arry.push('源掩码不能为空！');
        }
        if (_this.form.sourceMask < 0 || _this.form.sourceMask > 32) {
          arry.push('源掩码范围：0-32');
        }
      } else {
        if (_this.form.sourceIp === '' || _this.form.sourceIp === null) {
          arry.push('源IP不能为空！');
        } else {
          if (_this.form.sourceIp.replace(ipv4) !== 'undefined') {
            arry.push('源IP格式不正确！');
          }
        }
        if (_this.form.sourceMask === '' || _this.form.sourceMask === null) {
          arry.push('源掩码不能为空！');
        }
        if (_this.form.sourceMask < 0 || _this.form.sourceMask > 32) {
          arry.push('源掩码范围：0-32');
        }
        if (_this.form.sourcePort === '' || _this.form.sourcePort === null) {
          arry.push('源端口不能为空！');
        }
        if (_this.form.destIp === '' || _this.form.destIp === null) {
          arry.push('目的IP不能为空！');
        } else {
          if (_this.form.destIp.replace(ipv4) !== 'undefined') {
            arry.push('目的IP格式不正确！');
          }
        }
        if (_this.form.destMask === '' || _this.form.destMask === null) {
          arry.push('目的掩码不能为空！');
        }
        if (_this.form.destMask < 0 || _this.form.destMask > 32) {
          arry.push('目的掩码范围：0-32');
        }
        if (_this.form.destPort === '' || _this.form.destPort === null) {
          arry.push('目的端口不能为空！');
        }
      }
      return arry;
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let result = _this.ipAddress();
          if (result.length === 0) {
            let params = {
              deviceId: _this.introduce.deviceId,
              permit: _this.form.permit,
              protocolType: _this.form.protocolType,
              priority: _this.form.priority,
              bandWidth: _this.form.bandWidth,
            };
            if (_this.form.protocolType === 0) {
              params.srcIP = _this.form.sourceIp + '/' + _this.form.sourceMask;
              params.srcPort = _this.form.sourcePort;
              params.destIP = null;
              params.destPort = null;
            } else {
              params.srcIP = _this.form.sourceIp + '/' + _this.form.sourceMask;
              params.srcPort = _this.form.sourcePort;
              params.destIP = _this.form.destIp + '/' + _this.form.destMask;
              params.destPort = _this.form.destPort;
            }
            if (_this.type === 'create') {
              _this.$http.post({
                url: '/api/sdwan/vpn/server/acl/create',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('创建成功！');
                  _this.$parent.reset();
                  _this.cancel();
                }
              });
            } else {
              // 编辑时，需要规则ID，ACL名称
              params.id = _this.form.id;
              // 请求更新
              _this.$http.post({
                url: '/api/sdwan/vpn/server/acl/update',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.$message.success('更新成功！');
                  _this.$parent.reset();
                  _this.cancel();
                }
              });
            }
          } else {
            _this.$message.error(result[0]);
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
.ip-port-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 37%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input {
    width: 16%;
  }
  ::v-deep .el-input:last-child {
    width: 16%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>